<template>
	<app-layout>
		<view class="detail">
			<view class="detail-top">
				<app-detail-top
						:cover_pic="detail.goods.goodsWarehouse.cover_pic"
						:name="detail.goods.goodsWarehouse.name"
						:people_num="detail.people_num"
						:group_min_price="detail.group_min_price"
						:original_price="detail.goods.goodsWarehouse.original_price"
						:status="detail.status"
						:group_economize_price="detail.group_economize_price"
				></app-detail-top>
			</view>
			<view class="group-avatar">
				<app-group-short
						:url="url"
						:surplus_people="detail.surplus_people"
						:surplusDateTime="detail.surplus_date_time"
						:orderRelation="detail.orderRelation"
						:surplus_time="detail.surplus_time"
						:status="detail.status"
						:goodsId="detail.goods_id"
						:pintuan_sign="detail.pintuan_sign"
						:detail="detail"
				></app-group-short>
			</view>
			<view class="rule">
				<app-jump-button form arrangement="b" url="/plugins/pt/specification/specification">
					<text class="app-left">拼团须知</text>
					<view class="app-right dir-left-nowrap cross-center">
						<text>· 好友参团</text>
						<text>· 人满发货</text>
						<text>· 人不满退款</text>
						<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>
					</view>
				</app-jump-button>
			</view>
			<view class="rule more">
				<app-jump-button form arrangement="b" url="/plugins/pt/index/index">
					<text class="app-left">更多拼团</text>
					<view class="app-right dir-left-nowrap cross-center">
						<text>更多</text>
						<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>
					</view>
				</app-jump-button>
			</view>
			<view class="list">
				<app-product-list :list="list"></app-product-list>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appDetailTop from  '../components/app-detail-top.vue';
	import appGroupAvatarShort from '../components/app-group-avatar-short.vue';
	import appProductList from '../components/app-product-list.vue';
	
	import { mapGetters } from 'vuex';
	
    export default {
        name: 'detail',
	    data() {
            return {
                detail: null,
                url: '',
	            list: [],
				id: null
            }
	    },
	    onLoad(options) {
			this.id = options.id;
            this.request(options.id);
	    },
        onShow() {
            this.$store.dispatch('gConfig/setTabBarBoolean', this.tabBarNavs.navs);
        },
        computed: {
            ...mapGetters('mallConfig', {
                tabBarNavs: 'getNavBar'
            }),
        },
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/pt/detail/detail',
				title: this.detail.goods.app_share_title ? this.detail.goods.app_share_title : this.detail.goods.goodsWarehouse.name,
				imageUrl: this.detail.goods.app_share_pic ? this.detail.goods.app_share_pic : '',
				params: {
					id: this.id
				}
			});
		},
	    methods: {
            attrTap(data) {
                if (data !== null) {
                    this.selectAttr = data;
                } else {
                    this.selectAttr = {};
                }
            },
            request(id) {
                this.$request({
	                url: this.$api.pt.pt_detail,
	                data: {
	                    id: id,
	                }
                }).then(response => {
                    if (response.code === 0) {
                        this.detail = response.data.detail;
                        this.url = `${this.$api.pt.order_poster}&pintuan_group_id=${id}&goods_id=${this.detail.goods_id}`;
                    }
                }).catch(() => {
                });
                this.$request({
	                url: this.$api.pt.goods,
                }).then(response => {
                    if(response.code === 0) {
                        this.list = response.data.list;
                    }
                })
            }
	    },
	    components: {
            'app-detail-top': appDetailTop,
		    'app-group-short': appGroupAvatarShort,
		    'app-product-list': appProductList,
	    }
    }
</script>

<style scoped lang="scss">
	.rule {
		width: #{750rpx};
		height: #{90rpx};
		background-color: white;
		padding: 0 #{24rpx};
		box-sizing: border-box;
		.app-left{
			font-size: #{26rpx};
			color: #353535;
		}
		.app-right>text {
			font-size: #{24rpx};
			color: #999999;
			margin-left: #{30rpx};
		}
		.app-icon {
			width: #{12rpx};
			height: #{22rpx};
			margin-left: #{12rpx};
		}
	}
	.more {
		margin-top: #{20rpx};
	}
</style>